<template>
  <!-- 四个广告 模板 -->
  <div>
    <div class="three-box clearfix" v-if="wideGoods.length">
      <div class="three-item">
        <img v-lazy="wideGoods[0].img" alt="" v-if="JSON.stringify(wideGoods[0]) != '{}'">
        <button @click="editItem('left')">编辑</button>
      </div>
      <div class="three-item">
        <img v-lazy="wideGoods[1].img" alt="" v-if="JSON.stringify(wideGoods[1]) != '{}'"> 
        <button @click="editItem('middle')">编辑</button>
      </div>
      <div class="three-item">
        <img v-lazy="wideGoods[2].img" alt="" v-if="JSON.stringify(wideGoods[2]) != '{}'">
        <button @click="editItem('right')">编辑</button>
      </div>
      <div class="three-item">
        <img v-lazy="wideGoods[2].img" alt="" v-if="JSON.stringify(wideGoods[2]) != '{}'">
        <button @click="editItem('right')">编辑</button>
      </div>
    </div>
    
    <div class="three-box clearfix" v-else>
      <div class="three-item">
        <button @click="editItem('left')">编辑</button>
      </div>
      <div class="three-item">
        <button @click="editItem('middle')">编辑</button>
      </div>
      <div class="three-item">
        <button @click="editItem('right')">编辑</button>
      </div>
      <div class="three-item">
        <button @click="editItem('right')">编辑</button>
      </div>
  </div>
  </div>
</template>

<script>

export default {
  props: {
    floorId: String,
    wideGoods: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    editItem(position) {
      // this.$router.push(`/homeDecorate/edit?wideTemplate=${temp}&pos=${position}&floorId=${this.floorId}`)
      this.$emit('on-edit', this.floorId, 'adv_more', position)
    }
  }
}
</script>

<style lang='scss' scoped>
@import '../../../scss/_var.scss';
.three-box {
  width: 100%;
  .three-item {
    width: 24%;
    height: 62px;
    float: left;
    position: relative;
    background: #fff;
    margin-right: 8px;
    &:nth-of-type(4) {
      margin-right: 0;
    }
    button {
      width: 40px;
      height: 20px;
      border-radius: 10px;
      background: $color-main;
      position: absolute;
      top: 10px;
      right: 14px;
      color: #fff;
      font-size: 12px;
    }
  }
}
</style>
